<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>上传身份证照片</title>
    <link rel="stylesheet" type="text/css" href="../../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/style.css" />
    <style>
        html,
        body {
            /*background: #fff;*/
        }

        .inner_header {
            font-size: 1.6rem;
            color: #000000;
            font-weight: 600;
            height: 6.9rem;
            margin: 0;
            padding: 2.4rem 0 0 0;
            box-sizing: border-box;
            background: none!important;
            box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.08);
            background: #fff!important;
        }

        .content {
            width: 100%;
            float: left;
            margin: 6.9rem 0 0 0;
            box-sizing: border-box;
        }

        .content .content_head {
            width: 100%;
            height: 1.3rem;
            line-height: 1.3rem;
            text-align: center;
            color: #000;
            font-size: 1.25rem;
            margin-top: 1.25rem;
        }

        .content .content_head span {
            color: #0179ff;
        }

        .content img {
            width: 100%;
            height: 15rem;
            margin: 0 auto;
        }

        .content .img1 {
            width: 65.33%;
            height: 15rem;
            margin: 2.5rem auto 1.5rem auto;
            position: relative;
        }

        .content .btn {
            width: 93%;
            height: 4.7rem;
            background-color: #ee6a20;
            line-height: 4.7rem;
            text-align: center;
            color: #fff;
            margin: 0 auto;
            font-size: 1.6rem;
            letter-spacing: 0.03rem;
            margin-top: 6.9rem;
            border-radius: 1.98rem;
        }

        .content_text {
            width: 100%;
            height: 1.3rem;
            color: #ed6a20;
            font-size: 1.3rem;
            line-height: 1.3rem;
            bottom: 1.3rem;
            text-align: center;
            position: absolute;
        }
        .aui-toast .aui-toast-content {
            color: #fff
        }
    </style>
</head>

<body>
    <div id="app">
        <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
            <a class="aui-pull-left aui-btn" onclick="goBack()">
                <img src="../../../../image/back.png">
            </a>
            <div class="aui-title">上传身份证照片</div>
        </header>
        <div class="content">
            <div class="content_head">请上传<span>{{data.name}}</span>本人的身份证照片</div>
            <div class="img1" @click="showAction('a')">
                <img :src="card_a?card_a:'../../../../image/capital/icon9.png'" alt="#" class="" >
                <div class="content_text" v-if="card_a?false:true">
                    上传身份证头像面照片
                </div>
            </div>
            <div class="img1" @click="showAction('b')">
                <img :src="card_b?card_b:'../../../../image/capital/icon9.png'" alt="#" class="" >
                <div class="content_text" v-if="card_b?false:true">
                    上传身份证国徽面照片
                </div>
            </div>
            <div class="btn" @click="next('to_examine','./to_examine.html')">提交</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../../../script/api.js"></script>
<script type="text/javascript" src="../../../../script/zepto.js"></script>
<script type="text/javascript" src="../../../../script/axios.min.js"></script>
<script type="text/javascript" src="../../../../script/axios-config.js"></script>
<script type="text/javascript" src="../../../../script/vue.min.js"></script>
<script type="text/javascript" src="../../../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../../../script/utils.js"></script>
<script type="text/javascript" src="../../../../script/common.js"></script>
<script type="text/javascript" src="../../../../script/aui-toast.js"></script>
<script type="text/javascript" src="../../../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {
        var toast = new auiToast({})
        var data = api.pageParam.data
        new Vue({
            el: "#app",
            data: {
                username: '',
                card_id: '',
                data: data,
                card_a: '',
                card_b: '',
                check: "",
            },
            mounted:function(){
                // var is_real_name = $api.getStorage('is_real_name');  //获取用户是否实名认证缓存
                // api.addEventListener({
                //     name: 'updata_real_name'
                // },function(ret,err){
                //     if(ret.value.info=="updata"){
                //         that.user_info=$api.getStorage('user_info',that)
                //     }
                //     console.log(ret)
                // })
            },
            methods: {
                // 全部输入成功，进入下一个页面
                next: function(name, url) {
                    var that = this

                    var data = that.data
                    var card_A = that.card_A
                    var card_B = that.card_B
                    console.log(card_A)
                    console.log(card_B)
                    if(card_A&&card_B){
                        data["id_card_a"] = card_A
                        data["id_card_b"] = card_B
                        data["token"] = $api.getStorage('token');
                        console.log(JSON.stringify(data))
                        Axios.post(window.Url.addrealname,data).then(function(res){
                            console.log(JSON.stringify(res))
                            if(res.status==1){
                                // var is_real_name = $api.getStorage('is_real_name');  //获取用户是否实名认证缓存
                                // $api.setStorage('real_name',real_name)
                                // api.sendEvent({
                                //     name: 'update_real_name',
                                //     extra: {
                                //         info:"updata"
                                //     }
                                // });
                                toast.success({
                                    title: res.info,
                                    duration: 1000
                                });
                                api.sendEvent({
                                    name: 'reload',
                                    extra: {
                                        reload: true,
                                    }
                                });
                                setTimeout(function(){
                                    api.closeToWin({
                                        name:'real_choice'
                                    })
                                },1000)

                            }else {
                                toast.fail({
                                    title: res.info,
                                    duration: 2000
                                });
                            }
                        })
                    }
                        // api.openWin({
                        //     name: name,
                        //     url: url,
                        //     pageParam: {
                        //         data: ""
                        //     }
                        // });
                },
                showAction: function(index) {
                  console.log(index)
                    var that = this
                    that.check = index
                    api.actionSheet({
                        title: '上传头像',
                        cancelTitle: '取消',
                        buttons: ['拍照', '从手机相册选择']
                    }, function(ret, err) {
                        if (ret) {
                            that.getPicture(ret.buttonIndex);
                        }
                    });
                },
                getPicture(sourceType) {
                    var that = this
                    if (sourceType == 1) { // 拍照
                        //获取一张图片
                        api.getPicture({
                            sourceType: 'camera',
                            encodingType: 'jpg',
                            mediaValue: 'pic',
                            allowEdit: false,
                            quality: 90,
                            saveToPhotoAlbum: true
                        }, function(ret, err) {
                            // 获取拍照数据并处理
                            // console.log(JSON.stringify(ret))
                            if (ret) {
                                var imgSrc = ret.data;
                                var data = {};
                                if (imgSrc != "") {
                                    console.log(imgSrc)
                                    toast.loading({
                                          title:"上传中",
                                          duration:2000
                                      },function(ret){
                                          api.ajax({
                                              url: 'http://huafu.unohacha.com/Api/Base/appuploadimg',
                                              method: 'post',
                                              data: {
                                                  files: {
                                                      file: imgSrc
                                                  }
                                              }
                                          }, function(ret, err) {
                                                toast.hide();
                                              if (ret) {
                                                  console.log(JSON.stringify(ret));
                                                  if (ret.status == 1) {
                                                      that.check == "a" ? that.card_a =imgSrc : that.card_b = imgSrc //区分正反面
                                                      that.check == "a" ? that.card_A =ret.info : that.card_B = ret.info //区分正反面

                                                  }
                                              } else {
                                                    toast.hide();
                                                  alert(JSON.stringify(err));

                                              }
                                          });
                                      });

                                }
                            }
                        });
                    } else if (sourceType == 2) { // 从相机中选择
                        //UIMediaScanner 是一个多媒体扫描器，可扫描系统的图片、视频等多媒体资源
                        var obj = api.require('UIAlbumBrowser');
                        obj.open({
                            //返回的资源种类,picture（图片）,video（视频）,all（图片和视频）
                            type: 'picture',
                            //（可选项）图片显示的列数，须大于1
                            column: 4,
                            max: 1,
                            //（可选项）图片排序方式,asc（旧->新）,desc（新->旧）
                            sort: {
                                key: 'time',
                                order: 'desc'
                            },
                            //（可选项）模块各部分的文字内容
                            texts: {
                                stateText: '已选择*项',
                                cancelText: '取消',
                                finishText: '完成'
                            },
                            styles: {
                                bg: '#fff',
                                mark: {
                                    icon: '',
                                    position: 'bottom_right',
                                    size: 20
                                },
                                nav: {
                                    bg: '#eee',
                                    stateColor: '#000',
                                    stateSize: 18,
                                    cancleBg: 'rgba(0,0,0,0)',
                                    cancelColor: '#000',
                                    cancelSize: 18,
                                    finishBg: 'rgba(0,0,0,0)',
                                    finishColor: '#000',
                                    finishSize: 18
                                }
                            }
                        }, function(ret) {
                            // 获取图片数据并处理
                            if (ret) {
                                console.log(JSON.stringify(ret))
                                if (ret.list) {
                                    console.log(ret.list[0].thumbPath)
                                    if (ret.list.length!=0) {
                                      var imgSrc = ret.list[0].thumbPath;
                                      var data = {};
                                      if (imgSrc != ""){
                                        api.ajax({
                                            url: 'http://huafu.unohacha.com/Api/Base/appuploadimg',
                                            method: 'post',
                                            data: {
                                              files: {
                                                  file: imgSrc
                                              }
                                            }
                                        },function(ret, err){
                                            toast.hide();
                                            if (ret) {
                                                alert( JSON.stringify( ret ) );
                                                if (ret.status == 1) {
                                                    that.check == "a" ? that.card_a =imgSrc : that.card_b = imgSrc //区分正反面
                                                    that.check == "a" ? that.card_A =ret.info : that.card_B = ret.info //区分正反面

                                                }
                                            } else {
                                                toast.hide();
                                                alert( JSON.stringify( err ) );
                                            }
                                        });

                                      }
                                    }
                                    var ele = $api.dom('#avatar');
                                    $api.attr(ele, 'src', ret.list[0].thumbPath);
                                }
                            }
                        });
                    }
                }

            }
        });
    }
    function goBack() {
        api.closeWin({});
    }
</script>

</html>
